<template>
  <div id="app" class="wrapper" :class="themeClass">
    <app-loading></app-loading>
    <app-toast></app-toast>
    <app-mask></app-mask>
    <router-view />
  </div>
</template>

<script>
import Vue from "vue";

import Mask from "./components/widgets/Mask";
import Loading from "./components/widgets/Loading.vue";
import Toast from "./components/widgets/Toast.vue";

import common from "./mixins/common.js";
import { mapState } from "vuex";

export default {
  name: "App",
  mixins: [common],
  components: {
    "app-mask": Mask,
    "app-loading": Loading,
    "app-toast": Toast
  },
  data() {
    return {
      themeClass: "theme-"
    };
  },
  created() {},
  computed: {
    ...mapState(["skinType"])
  },
  watch: {
    skinType: function(val) {
      this.themeClass = "theme-" + val;
    }
  }
};
</script>

<style lang="less"></style>
